<include file="Common:header" title="添加服务"/>
<!--主题-->
<div class="page-header">
    <h1>
        您当前操作
        <small>
            <i class="ace-icon fa fa-angle-double-right"></i>
            添加服务
        </small>
    </h1>
</div>

<div class="row">
    <div class="col-xs-12">
        <form class="form-horizontal" id="form" enctype="multipart/form-data"  method="post" action="{:U('Service/add_service')}">
            <div class="form-group">
                <label class="col-lg-2 control-label" > Service名称：  </label>
                <div class="col-sm-4">
                    <input type="text"  id="service_name" name="service_name" value="" placeholder=""  class="form-control" />
                </div>
            </div>
            <div class="space-4"></div>


            <div class="form-group">
                <label class="col-lg-2 control-label" > Service类型：  </label>

                <div class="col-sm-4">
                    <select name="service_type" id="service_type" style="width:100px;" >
                        <volist name="service_type" id="vo">
                        <option value="{$vo.id}">{$vo.name}</option>
                        </volist>-->
                    </select>
                </div>
            </div>
            <div class="space-4"></div>


            <div class="form-group">
                <label class="col-lg-2 control-label" >      服务简介：  </label>
                <div class="col-sm-4">
                    <!--<input type="text"  id="service_content"  name="service_content" value="" placeholder=""  class="form-control" />-->
                    <textarea name="service_summary"  class="form-control" style="height: 100px;"></textarea>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group" >
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 服务内容：  </label>
                <div class="col-sm-10" style="width:50%;">
                    <div class="widget-body">
                        <textarea id="editor" name="service_content" type="text/plain" style="width:610px;height:300px;"></textarea>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-lg-2 control-label" > 是否置顶：  </label>

                <div class="col-sm-4">
                    <select name="top" id="top" style="width:100px;" >
                        <option value="0">否</option>
                        <option value="1">是</option>
                    </select>
                </div>
            </div>
            <div class="space-4"></div>

            <div class="form-group">
                <label class="col-sm-2 control-label no-padding-right" for="form-field-1"> 图片：<p class="red">要求尺寸：280*70</p>  </label>
                <div class="col-sm-10">
                    <div id="input_bann_img">

                    </div>
                    <div class="pics">
                        <ul id="ul_pics" class="ace-thumbnails clearfix">
                            <li>
                                <div data-rel="colorbox" class="cboxElement">
                                    <img id="images" style="width:300px;height: 300px;" alt="" src="{$images}">
                                    <input type="hidden" name="images">
                                </div>
                            </li>

                        </ul>
                        <button class="btn btn-info btn-sm" type="button" onclick="banner_choose()">
                            <i class="icon-ok bigger-110 "></i>上传图片
                        </button>
                    </div>
                </div>
            </div>
            <div class="space-4"></div>





            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <div class="btn btn-info" onclick="submit_form()">
                        <i class="ace-icon fa fa-check bigger-110"></i>
                        保存
                    </div>

                    <button class="btn" type="reset">
                        <i class="ace-icon fa fa-undo bigger-110"></i>
                        重置
                    </button>

                    <div class="space-4"></div>

                </div>
            </div>
        </form>
    </div>
</div>


<div class="modal fade" id="modal_upload">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">图片裁剪</h4>
            </div>
            <div class="modal-body" style="margin:0 auto; text-align: center;">
                <div id="clipArea" ></div>
                <input type="file" id="file" style="display:none;">
                <button class="btn btn-info btn-sm" type="button"  onclick="$('#file').click();">
                    <i class="icon-ok bigger-110 "></i>选择图片
                </button>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="clipBtn" type="button" class="btn btn-primary" data-dismiss="modal">确定图片</button>
            </div>
        </div>
    </div>
</div>


<style>
    .clearfix li{
        display:inline;
    }
    #clipArea {
        margin: 20px;
        height: 200px;
    }
    #file,
    #clipBtn {
        margin: 20px;
    }


    .clearfix1 li{
        display:inline;
    }

</style>


<script src="__PUBLIC__/assets/js/jquery-2.1.1.js"></script>

<!--ueditor编辑器-->
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/ueditor.all.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/ueditor/lang/zh-cn/zh-cn.js"></script>
<!--ueditor编辑器 end-->

<script src="__PUBLIC__/photoClip/js/iscroll-zoom.js"></script>
<script src="__PUBLIC__/photoClip/js/hammer.js"></script>
<script src="__PUBLIC__/photoClip/js/jquery.photoClip.js"></script>

<include file='Common:header_nav' />
<script>
    //实例化编辑器
    //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor('editor')就能拿到相关的实例
    var ue = UE.getEditor('editor');

    $("#video").change(function(){
        var self=$(this);
        var value=self['context'].value;
        if(value){
            $('#label').text('已选中'+value);
        }else{
            $('#label').text('');
        }
    });


    $("#clipArea").photoClip({
        width: 300,
        height: 300,
        file: "#file",
        ok: "#clipBtn",
        clipFinish: function(dataURL) {
            $('#images').attr('src',dataURL);
            $('input[name=images]').val(dataURL);
        }
    });


    //banner选择
    function banner_choose(){
        $("#modal_upload").modal();
    }






</script>

<script>
    function submit_form() {
        if ($('#service_name').val() == '') {
            layer.msg('服务名称不能为空');
            $('#service_name').focus();
            return false;
        }


        if ($('#service_summary').val() == '') {
            layer.msg('服务简介不能为空');
            $('#service_summary').focus();
            return false;
        }



        if ($('#file').val() == '') {
            layer.msg('图片不能为空');
            $('#file').focus();
            return false;
        }




        $('#form').submit();
    }
</script>


<include file="Common:footer"/>